<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
          <div class="head-container">
            <el-input
                v-model="deptName"
                placeholder="请输入部门名称"
                clearable
                prefix-icon="Search"
                style="margin-bottom: 20px"
            />
          </div>
          <div class="head-container">
            <el-tree
                :data="deptOptions"
                :props="{ label: 'label', children: 'children' }"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="deptTreeRef"
                node-key="id"
                highlight-current
                default-expand-all
                @node-click="handleNodeClick"
            />
          </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24">
          <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="用户名称" prop="userName">
                <el-input
                  v-model="queryParams.userName"
                  placeholder="请输入用户名称"
                  clearable
                  style="width: 240px"
                  @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item label="手机号码" prop="phonenumber">
                <el-input
                  v-model="queryParams.phonenumber"
                  placeholder="请输入手机号码"
                  clearable
                  style="width: 240px"
                  @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item label="创建时间" style="width: 308px;">
                <el-date-picker
                  v-model="dateRange"
                  value-format="YYYY-MM-DD"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                <el-button type="primary" :disabled="checkedItemList.length === 0" @click="submitForm">确 定</el-button>
            </el-form-item>
          </el-form>

          <el-row :gutter="10" class="mb8">
            <el-tag type="primary" style="margin-right: 10px" v-for="tag in checkedItemList" :key="tag.userId" closable @close="handleClose(tag.userId)">{{tag.userId}}</el-tag>
          </el-row>

          <el-table v-loading="loading" :data="userList" @row-click="handleCheck">
            <el-table-column width="50" align="center">
              <template #header v-if="!['转办', '委派'].includes(type)">
                  <el-checkbox
                      :indeterminate="checkAllInfo.isIndeterminate"
                      v-model="checkAllInfo.isChecked"
                      @change="handleCheckAll"
                  ></el-checkbox>
              </template>
              <template #default="scope">
                <el-checkbox v-model="scope.row.isChecked" @change.native="handleCheck(scope.row)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
            <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
            <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />
            <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" />
            <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />
            <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
              <template #default="scope">
                <el-tag :type="scope.row.status === '0' ? '' : 'warning'">{{ scope.row.status === '0' ? '正常' : '停用' }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
              <template #default="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            style="margin-bottom: 35px;"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
          />
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="User">
import {interactiveTypeSysUser} from "@/api/flow/execute.js";
import {deptTreeSelect} from "@/api/system/user.js";

const { proxy } = getCurrentInstance();
const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex");

const props = defineProps({
  userVisible: {
    type: Boolean
  },
  selectUser: {
    type: Array
  },
  postParams: {
    type: Object
  },
  type: {
    type: String
  }
});
const userList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const dateRange = ref([]);
const deptName = ref("");
const deptOptions = ref(undefined);
// 列显隐信息
const columns = ref([
 { key: 0, label: `用户编号`, visible: true },
 { key: 1, label: `用户名称`, visible: true },
 { key: 2, label: `用户昵称`, visible: true },
 { key: 3, label: `部门`, visible: true },
 { key: 4, label: `手机号码`, visible: true },
 { key: 5, label: `状态`, visible: true },
 { key: 6, label: `创建时间`, visible: true }
]);
const checkedItemList = ref([]); // 已选的itemList
const data = reactive({
 form: {},
 queryParams: {
   pageNum: 1,
   pageSize: 10,
   userName: undefined,
   phonenumber: undefined,
   status: "0",
   deptId: undefined
 },
  checkAllInfo: {
    isIndeterminate: false,
    isChecked: false,
  }
});

const { queryParams, checkAllInfo } = toRefs(data);
const emit = defineEmits(["update:userVisible", "handleUserSelect"]);

/** 通过条件过滤节点  */
const filterNode = (value, data) => {
 if (!value) return true;
 return data.label.indexOf(value) !== -1;
};
/** 根据名称筛选部门树 */
watch(deptName, val => {
 proxy.$refs["deptTreeRef"].filter(val);
});
watch(() => props.selectUser, (val, oldVal) => {
  if (oldVal) {
    nextTick(() => {
      checkedItemList.value = checkedItemList.value.filter(e => {
        let index = val ? val.findIndex(v => v === e.userId) : -1;
        userList.value.forEach(u => {
          if (u.userId === e.userId) u.isChecked = index !== -1;
        });
        return index !== -1;
      });
    });
  } else checkedItemList.value = val ? val.map(e => { return { userId: e } }) : [];
},{ deep: true, immediate: true });
/** 查询部门下拉树结构 */
function getDeptTree() {
 deptTreeSelect().then(response => {
   deptOptions.value = response.data;
 });
};
/** 查询用户列表 */
function getList() {
  loading.value = true;
  let params = proxy.addDateRange(queryParams.value, dateRange.value);
  if (props.type) {
    let postParams = JSON.parse(JSON.stringify(props.postParams));
    delete postParams.url;
    params = { ...postParams, deptId: queryParams.value.deptId };
  }
  interactiveTypeSysUser(params).then(res => {
    loading.value = false;
    total.value = res.total;
    res.rows.forEach(item => {
      item.isChecked = checkedItemList.value.findIndex(e => e.userId === item.userId) !== -1;
    })
    userList.value = res.rows;
    isCheckedAll();
  });
};
/** 节点单击事件 */
function handleNodeClick(data) {
 queryParams.value.deptId = data.id;
 handleQuery();
};
/** 搜索按钮操作 */
function handleQuery() {
 queryParams.value.pageNum = 1;
 getList();
};
/** 重置按钮操作 */
function resetQuery() {
 dateRange.value = [];
 proxy.resetForm("queryRef");
 queryParams.value.deptId = undefined;
 proxy.$refs.deptTreeRef.setCurrentKey(null);
 handleQuery();
};
// 是否全选中
function isCheckedAll() {
  const len = userList.value.length;
  let count = 0;
  userList.value.map(item => {
    if (item.isChecked) count += 1;
  });
  checkAllInfo.value.isChecked = len === count && len > 0;
  checkAllInfo.value.isIndeterminate = count > 0 && count < len;
};
// 全选
function handleCheckAll() {
  const checkedArr = checkedItemList.value;
  checkAllInfo.value.isIndeterminate = false;
  if (checkAllInfo.value.isChecked) {
    userList.value = userList.value.map(item => {
      item.isChecked = true;
      if (checkedItemList.value.findIndex(e => e.userId === item.userId) === -1) {
        checkedArr.push({ userId: item.userId });
      }
      return item;
    });
  } else {
    userList.value = userList.value.map(item => {
      item.isChecked = false;
      let index = checkedArr.findIndex(e => e.userId === item.userId);
      if (index !== -1) checkedArr.splice(index, 1);
      return item;
    });
  }
  checkedItemList.value = checkedArr;
};
// 单选
function handleCheck(row) {
  // 转办|委派仅支持单选
  if (['转办', '委派'].includes(props.type)) {
    userList.value.forEach(e => {
      if (e.userId === row.userId) e.isChecked = true;
      else e.isChecked = false;
    });
    checkedItemList.value = [{ userId: row.userId }];
  } else {
    userList.value.forEach(e => {
      if (e.userId === row.userId) e.isChecked = !e.isChecked;
    });
    const checkedArr = [...checkedItemList.value];
    if (row.isChecked) {
      checkedArr.push({ userId: row.userId });
    } else {
      const index = checkedArr.findIndex(n => n.userId === row.userId);
      if (index !== -1) checkedArr.splice(index, 1);
    }
    checkedItemList.value = checkedArr;
    isCheckedAll();
  }
};
// 删除标签
function handleClose(userId) {
  userList.value.forEach(e => {
    if (e.userId === userId) e.isChecked = !e.isChecked;
  });
  const checkedArr = checkedItemList.value
  const index = checkedArr.findIndex(n => n.userId === userId);
  if (index !== -1) checkedArr.splice(index, 1);
  checkedItemList.value = checkedArr;
  isCheckedAll();
};
// 取消按钮
function cancel() {
  emit("update:userVisible", false);
};
// 提交按钮
function submitForm() {
  emit("handleUserSelect", checkedItemList.value);
  cancel();
};

getDeptTree();
getList();
</script>
